import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  ImageBackground,
  TouchableOpacity,
  Modal,
  TextInput,
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import getStorageValue from '../../../utils/getStorageValue';
import fetchWebApi from '../../../public/WebApi/fetchBase';
import {
  Constant
} from '../../../public/js/constant';
import {
  GET_APPCARD
} from '../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class myCardBag extends Component {
  constructor(props) {
    super(props)
    const {
      password,
      isModal
    } = this.props.navigation.state.params
    this.state = {
      topTitle: "我的卡包",
      // 银行卡数据列表
      bankCardList: [],
      // tab默认选中状态
      defaultTab: true,
      password: password,
      isModal: isModal,
      flag: '',
      // 证件数据列表
      cardPacketDataList: [
        {
          certificateIcon: require("../../../assets/images/iconResources/IDCardIcon.png"),
          informationItrm: "身份证",
          certificateBg: require("../../../assets/images/iconResources/IDCardBg.png"),
          tificationNumber: '',
          whetherExists: false,
          cardType: 1,
        },
        {
          certificateIcon: require("../../../assets/images/iconResources/driverLicenseIcon.png"),
          informationItrm: "驾驶证",
          certificateBg: require("../../../assets/images/iconResources/driverLicnseBg.png"),
          tificationNumber: "",
          whetherExists: false,
          cardType: 2,
        },
        {
          certificateIcon: require("../../../assets/images/iconResources/studentIDIcon.png"),
          informationItrm: "学生证",
          certificateBg: require("../../../assets/images/iconResources/studentIDBg.png"),
          tificationNumber: "",
          whetherExists: false,
          cardType: 3,
        },
      ],
    };
  }

  componentDidMount = () => {
    if (this.state.password != '') {
      this.appcard()
    } else {
      this.setState({
        isModal: true
      })
    }
  }

  // 获取证件
  async appcard() {
    const {
      password,
      isModal,
      cardPacketDataList
    } = this.state
    const {
      state
    } = this.props.navigation
    const res = await fetchWebApi(GET_APPCARD,
      {
        token: await getStorageValue(Constant.TOKEN),
        password: password
      }, 'POST')
    if (res.data.flag == 0) {
      this.setState({
        flag: '请输入正确的密码',
        isModal: true,
        password: ''
      })
    } else {
      this.setState({
        isModal: false
      })
      state.params.refresh(isModal, password)
      // 添加新的证件
      let reg = /^(.{4})(?:\d+)(.{4})$/
      res.data.user.map(item3 => {
        if (item3.cardType == 5) {
          this.state.cardPacketDataList.push({
            certificateIcon: require("../../../assets/images/iconResources/otherIcon.png"),
            informationItrm: "其他证件",
            certificateBg: require("../../../assets/images/iconResources/studentIDBg.png"),
            tificationNumber: "",
            whetherExists: false,
            cardType: 5,
          })
        } else if (item3.cardType == 4) {
          this.state.bankCardList.push({
            nameofBankCard: "邮政银行",
            bankCardType: "储蓄卡",
            certificateBg: require("../../../assets/images/iconResources/bankCardBg.png"),
            tificationNumber: item3.cardNum.replace(reg, "$1 **** **** $2"),
            id: item3.id
          })
        }
      })
      // 给数组循环赋值
      cardPacketDataList.map(item => {
        res.data.user.map(item2 => {
          // 给号码加 * 号隐藏
          if (item.cardType == item2.cardType) {
            let str = item2.cardNum
            let strs
            if (str == null) {
              strs = null
            } else {
              strs = str.split("")
              strs.splice(3, 11, '*********')
            }
            this.setState({
              tificationNumber: (item.tificationNumber = strs),
              cardType: (item.cardType = item2.cardType),
              id: (item.id = item2.id)
            })
          }
          // 判断是否添加证件
          if (item.tificationNumber != '') {
            this.setState({
              whetherExists: (item.whetherExists = true)
            })
          } else {
            this.setState({
              whetherExists: (item.whetherExists = false)
            })
          }
        })
      })
    }
  }
  // tab点击事件
  onPreesTab = () => {
    if (!this.state.defaultTab) {
      this.setState({
        defaultTab: true
      })
    } else {
      this.setState({
        defaultTab: false
      })
    }
  }
  cardLogin(value) {
    this.setState({
      password: value
    })
  }

  render() {
    const {
      flag,
      password,
      cardPacketDataList,
      bankCardList
    } = this.state
    // 证件列表模块
    const certificates =
      <>
        {cardPacketDataList.map((item, index) => (
          <View style={styles.ItemBox} key={index}>
            {/* 证件每项的背景图 */}
            <ImageBackground
              style={styles.itemBg}
              source={item.certificateBg}>
              {/* 上部分信息  */}
              <View style={styles.certInformation}>
                <Image
                  style={styles.certificateIcon}
                  source={item.certificateIcon}
                />
                <View style={styles.Information}>
                  <Text style={styles.informationItrm}>
                    {item.informationItrm}
                  </Text>
                  <Text style={styles.tificationNumber}>
                    {item.whetherExists ?
                      item.tificationNumber == null ?
                        '已添加' : item.tificationNumber : "未添加"}
                  </Text>
                </View>
              </View>
              {/* 下部分按钮详情  */}
              <View style={styles.detailsBtn} >
                {item.whetherExists ?
                  <TouchableOpacity onPress={() => {
                    this.props.navigation.push("certificateDetails",
                      {
                        cardType: item.cardType,
                        id: item.id,
                        title: item.informationItrm
                      })
                  }}>
                    <Text style={styles.needAdd}>查看电子证件</Text>
                  </TouchableOpacity> :
                  <View style={styles.needToAdd}>
                    <Text style={styles.needToAdddetails}>添加照片以查看证件和备忘</Text>
                    <TouchableOpacity onPress={() => {
                      this.props.navigation.push('addCertificate',
                        {
                          cardType: item.cardType,
                          refresh: () => {
                            this.appcard()
                          },
                        });
                    }}>
                      <View style={styles.addBtnWarper}>
                        <Text style={styles.addBtn}>立即添加</Text>
                      </View>
                    </TouchableOpacity>
                  </View>}
              </View>
            </ImageBackground>
          </View>
        ))}
        {/* 添加证件按钮 */}
        <TouchableOpacity onPress={() => {
          this.props.navigation.push("addCertificates", {
            cardType: 5,
            refresh: () => {
              this.appcard()
            },
          })
        }}>
          <View style={styles.warperAdd}>
            <View style={styles.addCertificate}>
              <Image
                style={styles.addCertificates}
                source={require('../../../assets/images/iconResources/addCertificate.png')}
              />
              <Text style={styles.textCertificate}>添加证件</Text>
            </View>
          </View>
        </TouchableOpacity>
      </>
    // 银行卡列表模块
    const bankCard =
      <>
        {bankCardList.map((item, index) => (
          <TouchableOpacity key={index} onPress={() => {
            this.props.navigation.push("bankCardManag", {
              nameofBankCard: item.nameofBankCard,
              bankCardType: item.bankCardType,
              tificationNumber: item.tificationNumber,
              id: item.id,
              // refresh: () => {
              //   this.appcard()
              // },
            })
          }}>
            {/* <View style={styles.warperbankCardList}> */}
            <View style={styles.bankCardItemBox} key={index}>
              <ImageBackground
                style={styles.itemBgbankCard}
                source={item.certificateBg}>
                {/* 银行卡信息  */}
                <View style={styles.warperBankCard}>
                  <View style={styles.descriptionInformation}>
                    <Text style={styles.nameofBankCard}>{item.nameofBankCard}</Text>
                    <Text style={styles.bankCardType}>{item.bankCardType}</Text>
                  </View>
                  {/* 银行卡号码区 */}
                  <View style={styles.bankCardInformation}>
                    <Text style={styles.identificationNumber}>{item.tificationNumber}</Text>
                  </View>
                </View>
              </ImageBackground>
            </View>
            {/* </View> */}
          </TouchableOpacity>
        ))}
        {/* 添加证件按钮 */}
        <TouchableOpacity onPress={() => {
          this.props.navigation.push("addBankCards", {
            refresh: () => {
              this.appcard()
            },
          })
        }}>
          <View style={styles.warperAdd}>
            <View style={styles.addCertificate}>
              <Image
                style={styles.addCertificates}
                source={require('../../../assets/images/iconResources/addCertificate.png')}
              />
              <Text style={styles.textCertificate}>添加银行卡</Text>
            </View>
          </View>
        </TouchableOpacity>
      </>
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          rightImage={this.state.headerRightImage}
          titleColor={"#333"}
        />
        <ScrollView>
          <View style={styles.padlr}>
            <View style={styles.tabWarper}>
              {/* tab栏切换区 */}
              <View style={styles.tab}>
                {/* 证件 */}
                <TouchableOpacity onPress={() => {
                  this.onPreesTab()
                }}>
                  <Text style={this.state.defaultTab ?
                    styles.tabItemActive : styles.tabItemNo}>证 件</Text>
                </TouchableOpacity>
                {/* 银行卡 */}
                <TouchableOpacity onPress={() => {
                  this.onPreesTab()
                }}>
                  <Text style={!this.state.defaultTab ?
                    styles.tabItemActive : styles.tabItemNo}>银行卡</Text>
                </TouchableOpacity>
              </View>
            </View>
            {/* 默认证件选项 否是取反 */}
            {/* 证件列表 */}
            {/* 银行卡 */}
            {this.state.defaultTab ?
              certificates : bankCard}
          </View>
        </ScrollView>
        {/* 卡包验证模块 */}
        <Modal visible={this.state.isModal}
          onRequestClose={() => {
            this.props.navigation.goBack();
          }}>
          <TouchableOpacity onPress={() => {
            this.props.navigation.goBack();
          }}>
            <Text style={{
              marginTop: 20,
              marginLeft: 20,
              fontSize: 30
            }}>×</Text>
          </TouchableOpacity>
          <View style={styles.body}>
            <Text style={styles.card}>卡包验证</Text>
            <Text style={styles.password}>请输入登录密码，以验证身份</Text>
            <TextInput
              secureTextEntry={true}
              maxLength={8}
              style={styles.input}
              placeholderTextColor={flag == '' ?
                null : 'red'}
              placeholder={flag == '' ?
                '请输入密码' : flag}
              onChangeText={(value) => {
                this.cardLogin(value)
              }} >
              {password}
            </TextInput>
          </View>
          <TouchableOpacity
            onPress={() => {
              this.appcard()
            }}
            style={styles.submit}
          >
            <Text style={styles.submit_text}>确定</Text>
          </TouchableOpacity>
        </Modal>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    backgroundColor: "rgb(245,245,245)",
    flex: 1,
  },
  padlr: {
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 20,
    paddingBottom: 50
  },
  tabWarper: {
    flexDirection: "row",
    justifyContent: "center"
  },
  tab: {
    width: "60%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  tabItemActive: {
    width: 60,
    textAlign: "center",
    fontSize: 16,
    color: "#1890FF",
    fontWeight: "700",
    paddingBottom: 5,
    borderBottomColor: "#1890FF",
    borderBottomWidth: 2
  },
  tabItemNo: {
    width: 60,
    textAlign: "center",
    fontSize: 16,
    color: "rgba(0, 0, 0, 0.48);",
  },
  ItemBox: {
    marginTop: 20,
    borderRadius: 6,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },

  bankCardItemBox: {
    marginTop: 20,
    borderRadius: 10,
  },
  itemBg: {
    width: "100%",
    resizeMode: "cover",
  },
  itemBgbankCard: {
    paddingBottom: 50
  },
  addCertificates: {
    width: 25,
    height: 25,
    marginRight: 7
  },
  certInformation: {
    flexDirection: "row",
    padding: 25
  },

  descriptionInformation: {
    paddingLeft: 30,
    paddingTop: 30,

  },
  nameofBankCard: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "700",
    marginBottom: 5
  },
  bankCardType: {
    fontSize: 13,
    color: "rgba(255, 255, 255, 0.6)"
  },
  bankCardInformation: {
    width: "100%",
    justifyContent: "center",
    paddingTop: 20,
  },
  identificationNumber: {
    fontSize: 23,
    color: "#fff",
    textAlign: "center",
    paddingBottom: 20

  },
  certificateIcon: {
    width: 50,
    height: 50,
    marginRight: 20,
    borderRadius: 25
  },
  Information: {
    flexDirection: "column",
    justifyContent: "space-between"
  },
  informationItrm: {
    color: "#333",
    fontSize: 16,
    fontWeight: "700",
    marginBottom: 10
  },
  tificationNumber: {
    color: "#858585",
    fontSize: 13
  },
  detailsBtn: {
    justifyContent: "center",
    height: 37,
    color: "#333333",
    fontSize: 13,
    borderBottomStartRadius: 3,
    borderBottomEndRadius: 3,
    backgroundColor: "rgba(255,255,255,0.47)",
    textAlign: "center"
  },
  needAdd: {
    textAlign: "center"
  },
  needToAdddetails: {
    color: "#fff",
    fontSize: 13
  },
  needToAdd: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around"
  },
  addBtn: {
    color: "#333",
    fontSize: 12,
  },
  addBtnWarper: {
    width: 90,
    paddingTop: 4,
    paddingBottom: 4,
    paddingLeft: 7,
    paddingRight: 7,
    backgroundColor: "#fff",
    borderRadius: 5,
    justifyContent: "center",
    alignItems: "center"
  },
  warperAdd: {
    width: "100%",
    height: 50,
    paddingLeft: 15,
    marginTop: 20,
    borderRadius: 5,
    backgroundColor: "#fff",
    flexDirection: "row",
    alignItems: "center",
  },
  addCertificate: {
    flexDirection: "row",
    alignItems: "center"
  },
  body: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 100
  },
  card: {
    fontSize: 24
  },
  password: {
    fontSize: 16,
    marginTop: 20
  },
  input: {
    marginTop: 20,
    borderBottomWidth: 1,
    width: '50%',
    borderBottomColor: '#B3B3B3'
  },
  submit: {
    width: '70%',
    backgroundColor: '#1890FF',
    alignSelf: 'center',
    marginTop: 30,
    padding: 10,
    borderRadius: 6
  },
  submit_text: {
    color: '#fff',
    textAlign: 'center',
    textAlignVertical: 'center'
  }
})